<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
预加载是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
实现预加载常用方式是：new Image()。
Image对象的src属性 : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到浏览器的缓存文件夹里面，下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。-->
<script>

    const oDiv = document.querySelector("#app");
    const oImg = new Image();
    oImg.src = "https://avatars.githubusercontent.com/u/85861380?s=80&v=4";
    oImg.style.width = "100%";
    oImg.onload = function () {
        oDiv.appendChild(oImg);
    };
</script>
<body>
<div id="app"></div>
</body>
</html>
